<template>
  <img :src="image" alt="" />
</template>

<script>
export default {
  name: "FileImage",
  props: {
    file: [File, String],
  },
  watch: {
    file() {
      this.render();
    },
  },
  created() {
    this.render();
  },
  data() {
    return {
      image: "",
    };
  },
  methods: {
    render() {
      if (this.file) {
        if (typeof this.file === "string") {
          this.image = this.file;
          return;
        }
        let reader = new FileReader();
        reader.readAsDataURL(this.file);
        reader.onload = () => {
          this.image = reader.result;
        };
      }
    },
  },
};
</script>

<style lang="scss" scoped>
img {
  width: 100%;
  height: 100%;
}
</style>
